import React, { useEffect, useState,useRef } from 'react'
import { NavBar, Space, Toast, SearchBar } from 'antd-mobile'
import './search.css'
import { SearchBarRef } from 'antd-mobile/es/components/search-bar'
import { useNavigate } from 'react-router-dom'
import { Hot } from '../../axios'
import SearchList from './SearchList'
export default function Search() {
  const searchRef = useRef()
  let [ hotList,setHotList ] = useState([])
  let [ isShow,setIsShow ] = useState(true)
  let [ keyword,setKeyword ] = useState('')
  let [ vis,setVis ] = useState(true)
  useEffect(() =>{
    Hot().then(res => {
      // console.log(res);
      setHotList(res.data.data)
    })
  },[])
    let navigate = useNavigate()
    const right = (
        <div style={{ fontSize: 16 }}>
          <Space>
            搜索
          </Space>
        </div>
      )
    
  const goSearch = (name='') => {
    setVis(false)
    setKeyword(name)
    const timer = setTimeout(()=>{
      searchRef.current.searchlist(name)
    },100)
    clearTimeout(timer)
  }
  
  const input = (value) => {
    setKeyword(value)
  }
  return (
    <div className='search-box'>
      <NavBar className='search-top' right={right} onBack={() => navigate(-1) }>
        <SearchBar placeholder='请输入内容' value={keyword} onChange={input} onSearch={(value) => goSearch(value)}  />
      </NavBar>
      {vis && <div>
        <div className='hot'>
          <div className='hot-tit'>
            <span>热门搜索</span>
            <span onClick={() => setIsShow(!isShow)}>隐藏</span>
          </div>
          <div className='hot-list' style={{display:isShow?'block':'none'}}>
          {
            hotList.map(item => {
              if(item.keyword){
                return <span onClick={()=>goSearch(item.keyword)} key={item.wordid
                }>
                  {item.keyword}
                </span>
              }
              
            })
          }
          </div>
        </div>
        </div>}
        {!vis && <SearchList ref = {searchRef} keyword={keyword}></SearchList>}
    </div>
  )
}
